<template>
  <button @click="goBack" class="back-button">
    <img src="@/assets/back-icon.png" alt="返回" />
  </button>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1);  // 返回到上一页
    }
  }
}
</script>

<style scoped>
.back-button {
  position: fixed;
  top: 2vw;  /* 使用相对视口宽度的单位 */
  right: 0.01vw;  /* 使用相对视口宽度的单位 */
  border: none;  /* 调整边框的相对大小 */
  background: none;
  cursor: pointer;
  z-index: 10000;  /* 确保按钮在所有内容之上 */
  transition: transform 0.2s ease-out; /* 为按钮添加过渡效果 */
  padding: 1vw;  /* 使用相对视口宽度的单位 */
}

.back-button:active {
  transform: scale(0.95); /* 点击时缩小按钮 */
  transition: transform 0.1s ease-in; /* 释放时弹性回弹 */
}

.back-button img {
  width: 6vw;  /* 调整图标大小，使用相对视口宽度的单位 */
  height: 6vw;
  transition: transform 0.2s ease-out; /* 为图标添加过渡效果 */
}

.back-button:active img {
  transform: scale(1.1); /* 点击时图标略微放大 */
}
</style>


